$(function () {

    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop
console.log(t)
        var ullis = document.querySelector(`.mian-nav`)
        if (t > 100) {
            ullis.style.position = `fixed`;
            ullis.style.top = `0px`;
            ullis.style.zIdex = `999`
            ullis.style.backgroundColor = `white`
            ullis.style.width = `100%`


        } else {
            ullis.style.position = `static`
        }}



    var usercenterbtn = document.querySelector(`.wp-more`)
    usercenterbtn .onclick=function(){
       location.href = "usercenter.html"
    }

    var reg = /id=(\d+)/
    var arr = location.search.match(reg)
    if (!arr || !arr[1]) {
        layer.msg('非法访问！', {
            icon: 2,
            time: 2000
        }, function () {
            location.href = 'shoplist.html'
        })

    }
    var id = arr[1]
    // 发送ajax获取商品
    $.get('/getGoodlist', res => {
        res = JSON.parse(res)
        var data = res.data
        data = data.find(item => item.id == id)


        // var img = document.createElement('img')
        // img.src = data.goodsimg
        // $('.enlarge').append($(img))
        // $('.goodsname').text(data.goodsname)
        // $('.goodsprice').text(data.price)
        // $('.desc').html(data.goodsdetail)
        $(`.img-content`).children().eq(0).children().attr(`src`, data.fangda1)
        $(`.img-content`).children().eq(1).children().attr(`src`, data.fangda2)
        $(`.img-content`).children().eq(2).children().attr(`src`, data.fangda3)
        // $(`.img-content`).children().eq(3).children().attr(`src`,data.fangda4)
        // $(`.img-content`).children().eq(4).children().attr(`src`,data.fangda5)
        $(`.p-title`).find(`p`).text(data.title)
        $(`.marketPrice`).text(data.marketp)
        $(`.sp-price`).text(data.price)
        $(`.sp-discount`).text(data.discout)
         $(`.color-pic-wrapper`).children(`img`).attr(`src`,data.img)
        // $(`.comparePrice`).children().text(data.marketp)







        $(`.pic-slider-item`).mouseover(function () {

            $(this).addClass(`active`).siblings().removeClass(`active`)
            $(`.middle>img`).attr(`src`, $(this).children(`img`).attr(`src`))
            $(`.big>img`).attr(`src`, $(this).children(`img`).attr(`src`))


        })
        $(`.pic-slider-item`).mouseout(function () {
            $(this).removeClass(`active`)
        })
        $(`.middle`).hover(function () {
            // $(`.middle`).off(`hover`)

            $(`.big`).show()

            $(`.mask`).show()
            $('.middle').mousemove(function (e) {

                var x = e.pageX
                var y = e.pageY

                var l = x - $(`.mask`).outerWidth() / 2
                var t = y - $(`.mask`).outerHeight() / 2
                if (l < $(`.middle`).offset().left + parseInt($(`.middle`).css(`border-left-width`))) {
                    l = $(`.middle`).offset().left + parseInt($(`.middle`).css(`border-left-width`))
                }
                if (t < $(`.middle`).offset().top + parseInt($(`.middle`).css(`border-top-width`))) {
                    t = $(`.middle`).offset().top + parseInt($(`.middle`).css(`border-top-width`))
                }
                if (l > $(`.middle`).offset().left + parseInt($(`.middle`).css(`border-left-width`)) + $(`.middle`).innerWidth() - $(`.mask`).outerWidth()) {
                    l = $(`.middle`).offset().left + parseInt($(`.middle`).css(`border-left-width`)) + $(`.middle`).innerWidth() - $(`.mask`).outerWidth()
                }
                if (t > $(`.middle`).offset().top + parseInt($(`.middle`).css(`border-top-width`)) + $(`.middle`).innerHeight() - $(`.mask`).outerHeight()) {
                    t = $(`.middle`).offset().top + parseInt($(`.middle`).css(`border-top-width`)) + $(`.middle`).innerHeight() - $(`.mask`).outerHeight()
                }
                $(`.mask`).offset({
                    left: l,
                    top: t
                })
                var l1 = $(`.mask`).position().left / $(`.middle`).innerWidth() * $(`.big>img`).width()
                var t1 = $(`.mask`).position().top / $(`.middle`).innerHeight() * $(`.big>img`).height()
                $(`.big img`).css({
                    left: `${-l1}px`,
                    top: `${-t1}px`
                })

            })
        }, function () {
            $(`.big`).hide()
            $(`.mask`).hide()
        })
        $(`.leftbtn`).click(function () {

            $(`.img-content`).css(`left`, 0)
        })
        $(`.rightbtn`).click(function () {
            $(`.img-content`).css(`left`, -319)
        })

    })
$(`.comparePrice`).click(function(){
    location.href = 'shopcar.html'
})



$(`.finalPrice`).click(function(){
    var username = new Utils().getCookie('username')
    if(!username) {
        layer.msg('请先登录', {
            icon: 2,
            time: 2000
        }, function() {
            // 现在实际项目中大部分网站都是这么做的
            // location.href = 'login.html?url=当前地址'

            // 在跳转之前将当前地址存储在本地存储中
            localStorage.setItem('url', location.href)
            location.href = 'login.html'
        })
    } else {
        // 读取本地存储中购物车数据
        var cartData = localStorage.getItem('cartData')
        if(!cartData) {
            cartData = [{
                id: id,
                number: 1,
                username
            }]
            // 存cartData
        } else {
            cartData = JSON.parse(cartData)
            // 判断是否有当前用户丶当前商品数据
            var obj = cartData.find(item => item.username === username && item.id == id)
            if(!obj) {
                cartData.push({
                    id: id,
                    number: 1,
                    username
                })
            } else {
                obj.number++
            }
            // 存cartData
        }
        localStorage.setItem('cartData', JSON.stringify(cartData))
        layer.msg('加入购物车成功', {
            icon: 1,
            time: 1500
        })
    }

})})